import React, { useEffect } from 'react';
import { ConfigProvider, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { QueryClient, QueryClientProvider } from 'react-query';
import AppRoutes from './routes';
import './App.css';
import './assets/styles/theme.css';
import './assets/styles/layout.css';

// 创建 React Query 客户端
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      refetchOnWindowFocus: false,
      staleTime: 5 * 60 * 1000, // 5分钟
      cacheTime: 10 * 60 * 1000, // 10分钟
    },
    mutations: {
      retry: 1,
    },
  },
});

// 浅色商务主题配置
const businessTheme = {
  algorithm: theme.defaultAlgorithm,
  token: {
    // 主色调 - 改为浅色蓝色
    colorPrimary: '#1890ff',
    colorPrimaryBg: '#e6f7ff',
    colorPrimaryBgHover: '#bae7ff',
    colorPrimaryBorder: '#91d5ff',
    colorPrimaryBorderHover: '#69c0ff',
    colorPrimaryHover: '#40a9ff',
    colorPrimaryActive: '#096dd9',
    colorPrimaryTextHover: '#40a9ff',
    colorPrimaryText: '#1890ff',
    colorPrimaryTextActive: '#096dd9',

    // 成功色
    colorSuccess: '#059669',
    colorSuccessBg: '#ecfdf5',
    colorSuccessBorder: '#a7f3d0',

    // 警告色
    colorWarning: '#d97706',
    colorWarningBg: '#fef3c7',
    colorWarningBorder: '#fde68a',

    // 错误色
    colorError: '#dc2626',
    colorErrorBg: '#fef2f2',
    colorErrorBorder: '#fecaca',

    // 信息色
    colorInfo: '#0284c7',
    colorInfoBg: '#e0f2fe',
    colorInfoBorder: '#7dd3fc',

    // 文本颜色
    colorText: '#262626',
    colorTextSecondary: '#595959',
    colorTextTertiary: '#8c8c8c',
    colorTextQuaternary: '#bfbfbf',

    // 背景色
    colorBgContainer: '#ffffff',
    colorBgElevated: '#ffffff',
    colorBgLayout: '#f5f5f5',
    colorBgSpotlight: '#ffffff',
    colorBgMask: 'rgba(0, 0, 0, 0.45)',

    // 边框
    colorBorder: '#d9d9d9',
    colorBorderSecondary: '#f0f0f0',

    // 圆角
    borderRadius: 8,
    borderRadiusLG: 12,
    borderRadiusSM: 6,
    borderRadiusXS: 4,

    // 字体
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
    fontSize: 14,
    fontSizeLG: 16,
    fontSizeSM: 12,
    fontSizeXL: 20,
    fontSizeHeading1: 38,
    fontSizeHeading2: 30,
    fontSizeHeading3: 24,
    fontSizeHeading4: 20,
    fontSizeHeading5: 16,

    // 行高
    lineHeight: 1.5714285714285714,
    lineHeightLG: 1.5,
    lineHeightSM: 1.66,

    // 阴影
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)',
    boxShadowSecondary: '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',

    // 间距
    padding: 16,
    paddingLG: 24,
    paddingSM: 12,
    paddingXS: 8,
    paddingXXS: 4,

    // 组件特定样式
    controlHeight: 40,
    controlHeightLG: 48,
    controlHeightSM: 32,
    controlHeightXS: 24,

    // 动画
    motionDurationFast: '0.1s',
    motionDurationMid: '0.2s',
    motionDurationSlow: '0.3s',
  },
  components: {
    // 按钮组件
    Button: {
      fontWeight: 500,
      primaryShadow: '0 2px 0 rgba(24, 144, 255, 0.1)',
      dangerShadow: '0 2px 0 rgba(255, 77, 79, 0.1)',
    },
    // 输入框组件
    Input: {
      activeBorderColor: '#1890ff',
      hoverBorderColor: '#40a9ff',
    },
    // 卡片组件
    Card: {
      actionsBg: '#fafafa',
      actionsLiMargin: '12px 0',
      headerBg: 'transparent',
      headerFontSize: 16,
      headerFontSizeSM: 14,
      headerHeight: 56,
      headerHeightSM: 48,
    },
    // 表格组件
    Table: {
      headerBg: '#fafafa',
      headerColor: '#595959',
      headerSortActiveBg: '#f0f0f0',
      headerSortHoverBg: '#fafafa',
      bodySortBg: '#fafafa',
      rowHoverBg: '#f5f5f5',
      rowSelectedBg: '#e6f7ff',
      rowSelectedHoverBg: '#bae7ff',
    },
    // 菜单组件
    Menu: {
      itemBg: 'transparent',
      itemColor: '#595959',
      itemHoverBg: '#f5f5f5',
      itemHoverColor: '#262626',
      itemSelectedBg: '#e6f7ff',
      itemSelectedColor: '#1890ff',
      itemActiveBg: '#e6f7ff',
      subMenuItemBg: 'transparent',
    },
    // 模态框组件
    Modal: {
      headerBg: '#ffffff',
      contentBg: '#ffffff',
      footerBg: '#ffffff',
    },
  },
};

const App: React.FC = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <ConfigProvider 
        locale={zhCN}
        theme={businessTheme}
      >
        <div className="business-theme">
          <AppRoutes />
        </div>
      </ConfigProvider>
    </QueryClientProvider>
  );
};

export default App;